<template>
    <div>
      <el-form :inline="true" :model="vipUserListForm" class="demo-form-inline">
        <el-form-item label="用户名称">
          <el-input v-model="vipUserListForm.sysUserName" placeholder="用户名称,支持模糊匹配" />
        </el-form-item>
        <el-form-item label="手机号">
          <el-input v-model="vipUserListForm.sysUserPhone" placeholder="手机号,支持模糊匹配" />
        </el-form-item>
        <el-form-item label="状态">
          <el-select v-model="vipUserListForm.isForbidden" placeholder="请选择">
            <el-option label="请选择" value="" />
            <el-option label="已启用" value="0" />
            <el-option label="已禁用" value="1" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmitVipUserList">查询</el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="warning" v-if="!buttons.add" @click="handleAdd">新增</el-button>
        </el-form-item>
      </el-form>
      <el-table :data="tableDataVipUserList.list" border style="width: 100%">
        <el-table-column label="用户名称" align="center">
          <template slot-scope="scope">
            {{ scope.row.sysUserName }}
          </template>
        </el-table-column>
        <el-table-column label="登录名" align="center">
          <template slot-scope="scope">
            {{ scope.row.sysUserLoginName }}
          </template>
        </el-table-column>
        <el-table-column label="账号允许登录次数" align="center">
          <template slot-scope="scope">
            {{ scope.row.sysLoginNumber }}
          </template>
        </el-table-column>
        <el-table-column label="邮箱" align="center">
          <template slot-scope="scope">
            {{ scope.row.sysUserEmail }}
          </template>
        </el-table-column>
        <el-table-column label="手机号" align="center">
          <template slot-scope="scope">
            {{ scope.row.sysUserPhone }}
          </template>
        </el-table-column>
        <el-table-column label="状态" align="center">
          <template slot-scope="scope">
            <el-button v-if="scope.row.isForbidden === '0'" type="success" disabled>已启用</el-button>
            <el-button v-else type="danger" plain disabled>已禁用</el-button>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <el-button size="mini" type="danger" v-if="buttons.userRoleAuthor" style="padding: 5px 10px;margin-left: 0" @click="handleRole(scope.$index, scope.row)">角色</el-button>
            <el-button size="mini" type="danger" v-if="buttons.userStatus" plain style="padding: 5px 10px;margin-left: 0" @click="handleStatus(scope.$index, scope.row)">状态</el-button>
            <el-button size="mini" type="warning" v-if="buttons.userEdit" plain style="padding: 5px 10px;margin-left: 0" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
            <el-button size="mini" type="success" v-if="buttons.userDetail" style="padding: 5px 10px;margin-left: 0" @click="handleDetail(scope.$index, scope.row)">详情</el-button>
            <el-button size="mini" type="success" v-if="buttons.userPwd" style="padding: 5px 10px;margin-left: 0" @click="handleChangepwd(scope.$index, scope.row)">修改密码</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="block">
        <el-pagination
          :current-page="tableDataVipUserList.pageNum"
          :page-sizes="[10, 20, 50, 100]"
          :page-size="tableDataVipUserList.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="tableDataVipUserList.total"
          @size-change="handleSizeChangeVipUserList"
          @current-change="handleCurrentChangeVipUserList"
        />
      </div>
      <auth-user-role :check-box-roles="checkBoxRoles" :sys-user-uuid="sysUserUuid" :sys-user-name="sysUserName" />
      <auth-user-add :user-add="userAdd" @centerDialogVisibleUserAdd="centerDialogVisibleUserAdd" />
      <change-pwd :user-changepwd="userChangepwd" @centerDialogVisibleUserChangepwd="centerDialogVisibleUserChangepwd" />
      <auth-user-edit :user-edit="userEdit" @centerDialogVisibleUserEdit="centerDialogVisibleUserEdit" />
      <auth-user-detail :user-detail="userDetail" />
    </div>
</template>

<script>
import Vip from '@/api/axios/api/author/vip'
import AuthUserRole from '../componentUser/AuthUserRole'
import AuthUserAdd from '../componentUser/AuthUserAdd'
import AuthUserEdit from '../componentUser/AuthUserEdit'
import ChangePwd from '../../../common/ChangePwd'
import AuthUserDetail from '../componentUser/AuthUserDetail'
import User from '@/api/axios/api/author/user'
export default {
  name: 'VipUserList',
  components: {
    AuthUserRole,
    AuthUserAdd,
    ChangePwd,
    AuthUserDetail,
    AuthUserEdit
  },
  data () {
    return {
      buttons: {
        userPwd: false,
        userRoleAuthor: false,
        userDetail: false,
        userEdit: false,
        userStatus: false,
        userRole: false
      },
      userAdd: {
        centerDialogVisibleUserAdd: false,
        userGroupUuid: ''
      },
      userDetail: {
        centerDialogVisibleUserDetail: false,
        userInfo: {}
      },
      userEdit: {
        centerDialogVisibleUserEdit: false,
        userInfo: {}
      },
      sysUserName: '',
      checkBoxRoles: {},
      sysUserUuid: '',
      vipUserListForm: {
        userGroupUuid: '',
        isForbidden: '',
        sysUserPhone: '',
        sysUserName: ''
      },
      userChangepwd: {
        centerDialogVisibleUserChangepwd: false,
        sysUserUuid: '',
        titleChangepwd: ''
      },
      tableDataVipUserList: {}
    }
  },
  methods: {
    handleRole (index, row) {
      const obj = {}
      obj.userUuid = row.sysUserUuid
      User.userHasRoles(obj).then(res => {
        this.checkBoxRoles = res
        this.sysUserName = row.sysUserName
        this.sysUserUuid = row.sysUserUuid
      })
    },
    onSubmitVipUserList () {
      this.vipUserListData()
    },
    handleSizeChangeVipUserList () {
      this.vipUserListData()
    },
    handleAdd (index, row) {
      this.userAdd.centerDialogVisibleUserAdd = true
      this.userAdd.userGroupUuid = this.$route.query.userGroupUuid
    },
    handleChangepwd (index, row) {
      this.userChangepwd.centerDialogVisibleUserChangepwd = true
      this.userChangepwd.sysUserUuid = row.sysUserUuid
      this.userChangepwd.titleChangepwd = row.sysUserName
    },
    centerDialogVisibleUserChangepwd () {
      this.userChangepwd.centerDialogVisibleUserChangepwd = false
      this.vipUserListData()
    },
    centerDialogVisibleUserAdd () {
      this.userAdd.centerDialogVisibleUserAdd = false
      this.vipUserListData()
    },
    handleEdit (index, row) {
      this.userEdit.centerDialogVisibleUserEdit = true
      User.userDetail(row).then(value => {
        this.userEdit.userInfo = value.data
      })
    },
    handleDetail (index, row) {
      this.userDetail.centerDialogVisibleUserDetail = true
      User.userDetail(row).then(value => {
        this.userDetail.userInfo = value.data
      })
    },
    centerDialogVisibleUserEdit () {
      this.userEdit.centerDialogVisibleUserEdit = false
      this.vipUserListData()
    },
    handleStatus (index, row) {
      let msg = '启用'
      if (row.isForbidden === '0') {
        msg = '禁用'
      }
      this.$confirm('您确定要 ' + msg + ' ' + row.sysUserName + ' 吗', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        User.userStatus(row).then(res => {
          if (res.status === 200) {
            this.$message({
              type: 'success',
              message: res.data
            })
            setTimeout(() => {
              this.vipUserListData()
            }, 1000)
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消对 ' + row.sysUserName + ' 的状态变更'
        })
      })
    },
    handleCurrentChangeVipUserList () {
      this.vipUserListData()
    },
    vipUserListData () {
      this.vipUserListForm.userGroupUuid = this.$route.query.userGroupUuid
      Vip.vipUserPage(this.vipUserListForm).then(res => {
        this.tableDataVipUserList = res.data
      })
    }
  },
  created () {
    this.vipUserListData()
    console.log(this.$route.meta.buttons)
    if (this.$route.meta.buttons) {
      this.buttons = Object.assign(this.buttons, this.$route.meta.buttons)
    }
  }
}
</script>

<style scoped>

</style>
